<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <input type="button" value="点我一下~"> -->

    <!-- <input type="text"> -->

    <!-- 学习onkeyUp -->
    <input type="text" onkeyup="MyOnKeyUp()">

</body>

<script>
    //选中事件源
    // let button = document.querySelector("input");
    // //绑定事件类型 点击事件
    // button.onclick = function () {
    //     alert("我被点击了~~");
    // }

    //确立事件源
    let input = document.querySelector("input");

    //绑定事件
    // input.onkeydown = function (event) {
    //     console.log("键盘被按下了~~");
    //     let a = event.keyCode;
    //     let b = String.fromCharCode(a);
    //     console.log(b)
    // }

    // onkeypress//区分大小写
    input.onkeypress = function (event) {
        console.log("键盘被按下了~~");
        let a = event.keyCode;
        let b = String.fromCharCode(a);
        console.log(b)
    }

    function MyOnKeyUp() {
        console.log("按键被抬起~~");
    }
</script>

</html>